<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链判断运算符</title>
</head>
<body>
    <h1>链判断运算符</h1>
    <h2>链判断运算符?.用于判断对象的属性是否存在</h2>
    <h2>如果运算符左侧的值为null或undefined，就不再往下运算，而是返回undefined</h2>

    <script>
        // 示例1：基本使用
        const user = {
            address: {
                street: '123 Main St'
            }
        };
        
        // 使用链判断运算符
        console.log(user?.address?.street); // "123 Main St"
        console.log(user?.nonexistent?.property); // undefined
        
        // 示例2：与函数调用一起使用
        const obj = {
            func: function() {
                return 'Hello';
            }
        };
        
        console.log(obj.func?.()); // "Hello"
        console.log(obj.nonexistentFunc?.()); // undefined
        
        // 示例3：与数组一起使用
        const arr = [1, 2, 3];
        console.log(arr?.[0]); // 1
        console.log(arr?.[10]); // undefined
        
        // 示例4：多重判断
        const deepObj = {
            a: {
                b: {
                    c: 'value'
                }
            }
        };
        
        console.log(deepObj?.a?.b?.c); // "value"
        console.log(deepObj?.x?.y?.z); // undefined
    </script>
</body>
</html>
 